CSS @scope: Μια Βαθιά Βουτιά στον Ορισμό Κανόνων Περιορισμένης Εμβέλειας Στυλ

Ο κόσμος της CSS εξελίσσεται συνεχώς, με νέες δυνατότητες και τεχνικές να αναδύονται για να βοηθήσουν τους προγραμματιστές να δημιουργήσουν πιο συντηρήσιμα, επεκτάσιμα και στιβαρά φύλλα στυλ. Μία από τις πιο συναρπαστικές πρόσφατες προσθήκες είναι ο at-rule @scope, που προσφέρει έναν ισχυρό μηχανισμό για τον ορισμό κανόνων στυλ περιορισμένης εμβέλειας. Αυτό το άρθρο παρέχει μια ολοκληρωμένη εξερεύνηση του @scope, καλύπτοντας τη σύνταξή του, τα οφέλη, τις περιπτώσεις χρήσης και πώς μπορεί να φέρει επανάσταση στην προσέγγισή σας στην αρχιτεκτονική CSS.

Τι είναι το CSS @scope;

Το @scope σάς επιτρέπει να περιορίσετε την εμβέλεια των κανόνων CSS σε ένα συγκεκριμένο υποδέντρο μέσα στο έγγραφο HTML σας. Αυτό σημαίνει ότι μπορείτε να εφαρμόσετε στυλ μόνο σε συγκεκριμένα τμήματα της σελίδας σας, χωρίς να επηρεάζετε άλλα στοιχεία, ακόμα κι αν έχουν τα ίδια ονόματα κλάσεων ή επιλογείς. Αυτό μειώνει σημαντικά τον κίνδυνο ακούσιων συγκρούσεων στυλ και καθιστά τον κώδικα CSS σας πιο προβλέψιμο και συντηρήσιμο.

Σκεφτείτε το σαν να δημιουργείτε απομονωμένα κοντέινερ στυλ μέσα στη δομή HTML σας. Τα στοιχεία εντός της εμβέλειας θα διαμορφωθούν σύμφωνα με τους κανόνες που ορίζονται στο μπλοκ @scope, ενώ τα στοιχεία εκτός της εμβέλειας παραμένουν ανεπηρέαστα.

Σύνταξη του @scope

            
@scope (<scope-root>) to (<scope-limit>)? {
  /* CSS rules for elements within the scope */
}

            

              
                Copy
              
            
          

Ας αναλύσουμε τα διάφορα μέρη της σύνταξης:

• @scope: Αυτός είναι ο ίδιος ο at-rule, που σηματοδοτεί την αρχή ενός μπλοκ στυλ περιορισμένης εμβέλειας.
• <scope-root>: Αυτός ο επιλογέας ορίζει το στοιχείο που θα λειτουργεί ως η ρίζα της εμβέλειας. Τα στυλ εντός του μπλοκ @scope θα ισχύουν μόνο για αυτό το στοιχείο και τους απογόνους του. Εάν παραλειφθεί, ολόκληρο το έγγραφο θεωρείται η ρίζα της εμβέλειας.
• to <scope-limit> (Προαιρετικό): Αυτή η προαιρετική ρήτρα ορίζει ένα όριο πέρα από το οποίο τα στυλ δεν θα ισχύουν πλέον. Ο επιλογέας <scope-limit> καθορίζει ένα στοιχείο πάνω από τη ρίζα της εμβέλειας που δεν πρέπει να διαμορφωθεί από τους κανόνες εντός του @scope. Εάν η ρίζα της εμβέλειας περιέχεται σε ένα ταιριαστό όριο εμβέλειας, η εμβέλεια απενεργοποιείται ουσιαστικά.
• { /* Κανόνες CSS */ }: Αυτό είναι το μπλοκ που περιέχει τους κανόνες CSS που θα εφαρμοστούν εντός της καθορισμένης εμβέλειας.

Βασικά Παραδείγματα

Ας απεικονίσουμε τη χρήση του @scope με μερικά απλά παραδείγματα.

Παράδειγμα 1: Περιορισμός Στυλ σε ένα Συγκεκριμένο Τμήμα

Ας υποθέσουμε ότι έχετε ένα τμήμα της ιστοσελίδας σας αφιερωμένο στην εμφάνιση πληροφοριών προϊόντων, και θέλετε να εφαρμόσετε συγκεκριμένα στυλ στις επικεφαλίδες και τις παραγράφους μόνο σε αυτό το τμήμα. Μπορείτε να χρησιμοποιήσετε το @scope για να το πετύχετε αυτό:

            
<div class="product-container">
  <h2>Product Title</h2>
  <p>Product description goes here.</p>
</div>

<div class="other-section">
  <h2>Another Heading</h2>
  <p>Content for another section.</p>
</div>

            

              
                Copy
              
            
          

            
@scope (.product-container) {
  h2 {
    color: blue;
    font-size: 24px;
  }
  p {
    line-height: 1.5;
  }
}

            

              
                Copy
              
            
          

Σε αυτό το παράδειγμα, ο at-rule @scope στοχεύει το στοιχείο .product-container ως ρίζα της εμβέλειας. Τα στυλ που ορίζονται εντός του μπλοκ (μπλε επικεφαλίδες και προσαρμοσμένο ύψος γραμμής παραγράφου) θα εφαρμοστούν μόνο στα στοιχεία h2 και p εντός του .product-container. Τα στοιχεία h2 και p στο .other-section δεν θα επηρεαστούν.

Παράδειγμα 2: Χρήση της ρήτρας `to` για τον περιορισμό της εμβέλειας

Εξετάστε ένα σενάριο όπου θέλετε να διαμορφώσετε ένα συγκεκριμένο component διαφορετικά ανάλογα με τη θέση του στη σελίδα. Μπορείτε να χρησιμοποιήσετε τη ρήτρα `to` για να αποτρέψετε την εφαρμογή του στυλ στο component όταν βρίσκεται μέσα σε ένα συγκεκριμένο κοντέινερ.

            
<div class="page">
  <div class="component">
    <!-- Component content -->
  </div>
  <div class="special-section">
    <div class="component">
      <!-- Component content -->
    </div>
  </div>
</div>

            

              
                Copy
              
            
          

            
@scope (.component) to (.special-section) {
  background-color: lightblue;
}

            

              
                Copy
              
            
          

Σε αυτό το παράδειγμα, το `background-color: lightblue` θα εφαρμοστεί μόνο στα στοιχεία `.component` που ΔΕΝ βρίσκονται εντός του `.special-section`. Το component μέσα στο `.special-section` δεν θα έχει το γαλάζιο φόντο.

Οφέλη από τη Χρήση του @scope

Η υιοθέτηση του @scope στην αρχιτεκτονική CSS σας προσφέρει πολλά σημαντικά πλεονεκτήματα:

• Βελτιωμένη Συντηρησιμότητα: Απομονώνοντας τα στυλ σε συγκεκριμένα μέρη της εφαρμογής σας, το @scope διευκολύνει την κατανόηση, την τροποποίηση και την αποσφαλμάτωση του κώδικα CSS σας. Μπορείτε να εστιάσετε στα στυλ που αφορούν ένα συγκεκριμένο component ή τμήμα χωρίς να ανησυχείτε για ακούσιες παρενέργειες σε άλλα μέρη της εφαρμογής.
• Μειωμένες Συγκρούσεις Εξειδίκευσης: Το @scope βοηθά στον μετριασμό των ζητημάτων εξειδίκευσης (specificity) δημιουργώντας διακριτά πλαίσια στυλ. Αυτό μειώνει την ανάγκη για υπερβολικά εξειδικευμένους επιλογείς ή τη χρήση του !important, με αποτέλεσμα καθαρότερη και πιο διαχειρίσιμη CSS.
• Ενισχυμένη Επαναχρησιμοποίηση: Μπορείτε να δημιουργήσετε επαναχρησιμοποιήσιμα components με τα δικά τους ενθυλακωμένα στυλ, γνωρίζοντας ότι αυτά τα στυλ δεν θα παρεμβαίνουν σε άλλα μέρη της εφαρμογής σας. Αυτό προωθεί μια αρθρωτή προσέγγιση στην ανάπτυξη και διευκολύνει την κοινή χρήση και επαναχρησιμοποίηση κώδικα σε διαφορετικά έργα.
• Απλοποιημένη Αρχιτεκτονική CSS: Το @scope ενθαρρύνει μια πιο δομημένη και οργανωμένη αρχιτεκτονική CSS. Ορίζοντας ρητά την εμβέλεια των στυλ, μπορείτε να δημιουργήσετε μια σαφή ιεραρχία στυλ και να αποφύγετε την πολυπλοκότητα και το χάος που μπορεί να προκύψει από τα παγκόσμια φύλλα στυλ.
• Συνεργασία Ομάδας: Όταν εργάζεστε σε μεγάλες ομάδες, το @scope μπορεί να βοηθήσει στην αποφυγή συγκρούσεων στυλ μεταξύ διαφορετικών προγραμματιστών. Κάθε προγραμματιστής μπορεί να εργάζεται σε συγκεκριμένα components ή τμήματα της εφαρμογής με σιγουριά, γνωρίζοντας ότι τα στυλ του δεν θα επηρεάσουν ακούσια την εργασία των άλλων.

Περιπτώσεις Χρήσης για το @scope

Το @scope είναι ιδιαίτερα κατάλληλο για μια ποικιλία σεναρίων ανάπτυξης ιστοσελίδων:

• Αρχιτεκτονικές Βασισμένες σε Components: Σε frameworks όπως το React, το Vue.js και το Angular, όπου οι εφαρμογές χτίζονται από επαναχρησιμοποιήσιμα components, το @scope μπορεί να χρησιμοποιηθεί για να ενθυλακώσει τα στυλ κάθε component, εξασφαλίζοντας ότι είναι απομονωμένα και δεν παρεμβαίνουν το ένα στο άλλο. Για παράδειγμα, μπορεί να έχετε ένα component <Button> με το δικό του σύνολο στυλ που ορίζεται μέσα σε ένα μπλοκ @scope.
• Μεγάλες, Σύνθετες Εφαρμογές: Σε μεγάλες εφαρμογές με σημαντικό όγκο κώδικα CSS, το @scope μπορεί να βοηθήσει στη διαχείριση της πολυπλοκότητας και στην πρόληψη συγκρούσεων στυλ. Διαιρώντας την εφαρμογή σε μικρότερα, με περιορισμένη εμβέλεια πλαίσια στυλ, μπορείτε να κάνετε τον κώδικα CSS πιο διαχειρίσιμο και συντηρήσιμο.
• Widgets και Plugins Τρίτων: Κατά την ενσωμάτωση widgets ή plugins τρίτων στην ιστοσελίδα σας, το @scope μπορεί να χρησιμοποιηθεί για να απομονώσει τα στυλ τους και να τα αποτρέψει από το να παρεμβαίνουν στα υπάρχοντα στυλ σας. Αυτό είναι ιδιαίτερα χρήσιμο όταν το widget ή το plugin χρησιμοποιεί γενικά ονόματα κλάσεων που ενδέχεται να συγκρούονται με τα δικά σας στυλ.
• Συστήματα Διαχείρισης Περιεχομένου (CMS): Σε περιβάλλοντα CMS όπου οι χρήστες μπορούν να δημιουργούν και να διαχειρίζονται περιεχόμενο με διαφορετικές απαιτήσεις στυλ, το @scope μπορεί να χρησιμοποιηθεί για την παροχή διαφορετικών θεμάτων στυλ ή προτύπων για διαφορετικά τμήματα της ιστοσελίδας.
• Web Components: Το @scope συνεργάζεται άψογα με τα web components, επιτρέποντάς σας να διαμορφώσετε αποτελεσματικά το περιεχόμενο του shadow DOM του component.

Πρακτικά Παραδείγματα και Σενάρια

Ας εξερευνήσουμε μερικά πιο σύνθετα και πρακτικά παραδείγματα για το πώς μπορεί να χρησιμοποιηθεί το @scope σε πραγματικά σενάρια ανάπτυξης ιστοσελίδων.

Παράδειγμα 3: Διαμόρφωση Στυλ ενός Ενσωματωμένου Component

Φανταστείτε ότι έχετε μια δομή ενσωματωμένων components, όπως ένα component <Card> που περιέχει ένα component <Button>. Θέλετε να διαμορφώσετε το <Button> διαφορετικά ανάλογα με το αν βρίσκεται μέσα σε ένα <Card> ή όχι.

            
<div class="card">
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
  <button class="button">Click Me</button>
</div>

<button class="button">Standalone Button</button>

            

              
                Copy
              
            
          

            
@scope (.card) {
  .button {
    background-color: green;
    color: white;
  }
}

.button {
  background-color: blue;
  color: white;
}

            

              
                Copy
              
            
          

Σε αυτό το παράδειγμα, ο at-rule @scope στοχεύει το στοιχείο .card ως ρίζα της εμβέλειας. Το .button εντός του .card θα έχει πράσινο φόντο, ενώ το αυτόνομο .button θα έχει μπλε φόντο.

Παράδειγμα 4: Διαμόρφωση Στυλ ενός Παραθύρου Modal

Τα παράθυρα modal συχνά απαιτούν συγκεκριμένο στυλ για να εξασφαλιστεί ότι ξεχωρίζουν από την υπόλοιπη σελίδα. Μπορείτε να χρησιμοποιήσετε το @scope για να απομονώσετε τα στυλ του παραθύρου modal και να τα αποτρέψετε από το να επηρεάζουν άλλα στοιχεία στη σελίδα.

            
<div class="modal">
  <div class="modal-content">
    <h2>Modal Title</h2>
    <p>Modal content goes here.</p>
    <button class="close-button">Close</button>
  </div>
</div>

            

              
                Copy
              
            
          

            
@scope (.modal) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);

  .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
  }

  .close-button {
    background-color: red;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
  }
}

            

              
                Copy
              
            
          

Σε αυτό το παράδειγμα, ο at-rule @scope στοχεύει το στοιχείο .modal ως ρίζα της εμβέλειας. Τα στυλ που ορίζονται εντός του μπλοκ (τοποθέτηση, χρώμα φόντου, στυλ περιεχομένου και στυλ κουμπιού κλεισίματος) θα εφαρμοστούν μόνο στα στοιχεία εντός του .modal. Αυτό εξασφαλίζει ότι το παράθυρο modal διαμορφώνεται σωστά χωρίς να επηρεάζει άλλα στοιχεία στη σελίδα.

Παράδειγμα 5: Στυλ βάσει θέματος

Ας πούμε ότι έχετε έναν ιστότοπο με φωτεινό και σκοτεινό θέμα. Χρησιμοποιώντας το @scope, μπορείτε εύκολα να ορίσετε στυλ για κάθε θέμα χωρίς πολύπλοκη λογική επιλογέων.

            
<body class="light-theme">
  <div class="content">
    <h1>My Website</h1>
    <p>Some content here.</p>
  </div>
</body>

<body class="dark-theme">
  <div class="content">
    <h1>My Website</h1>
    <p>Some content here.</p>
  </div>
</body>

            

              
                Copy
              
            
          

            
@scope (.light-theme) {
  .content {
    background-color: #fff;
    color: #000;
  }
}

@scope (.dark-theme) {
  .content {
    background-color: #333;
    color: #fff;
  }
}

            

              
                Copy
              
            
          

Αυτό το παράδειγμα δείχνει πώς το στοιχείο .content θα έχει διαφορετικό χρώμα φόντου και κειμένου ανάλογα με το αν το στοιχείο body έχει την κλάση .light-theme ή .dark-theme.

@scope και Εξειδίκευση CSS (Specificity)

Είναι σημαντικό να κατανοήσετε πώς το @scope αλληλεπιδρά με την εξειδίκευση της CSS (specificity). Ενώ το @scope δημιουργεί πλαίσια στυλ, δεν επαναφέρει από μόνο του την εξειδίκευση. Οι επιλογείς μέσα σε ένα μπλοκ @scope εξακολουθούν να έχουν το κανονικό τους βάρος εξειδίκευσης.

Ωστόσο, το @scope μπορεί να σας βοηθήσει να διαχειριστείτε την εξειδίκευση πιο αποτελεσματικά. Περιορίζοντας την εμβέλεια των στυλ, μπορείτε να αποφύγετε καταστάσεις όπου απαιτούνται υπερβολικά εξειδικευμένοι επιλογείς για να παρακάμψετε ανεπιθύμητα στυλ από άλλα μέρη της εφαρμογής. Αυτό οδηγεί σε ένα πιο επίπεδο και διαχειρίσιμο γράφημα εξειδίκευσης.

Για παράδειγμα, εξετάστε αυτές τις δύο προσεγγίσεις:

Χωρίς @scope:

            
/* To override a global style, you might need a very specific selector */
.container .widget .item:hover .title {
  color: red !important; /* Avoid using !important if possible! */
}

            

              
                Copy
              
            
          

Με @scope:

            
@scope (.widget) {
  .item:hover .title {
    color: red;
  }
}

            

              
                Copy
              
            
          

Στο δεύτερο παράδειγμα, το @scope περιορίζει το πλαίσιο στο .widget, επιτρέποντάς σας να χρησιμοποιήσετε έναν απλούστερο επιλογέα χωρίς την ανάγκη για !important.

Υποστήριξη από Προγράμματα Περιήγησης και Polyfills

Ως μια σχετικά νέα δυνατότητα, η υποστήριξη του @scope από τα προγράμματα περιήγησης εξελίσσεται ακόμα. Είναι κρίσιμο να ελέγξετε την τρέχουσα συμβατότητα των browsers πριν το χρησιμοποιήσετε σε περιβάλλοντα παραγωγής. Μπορείτε να συμβουλευτείτε πηγές όπως το caniuse.com για να παραμένετε ενήμεροι σχετικά με την υποστήριξη των προγραμμάτων περιήγησης.

Εάν πρέπει να υποστηρίξετε παλαιότερους browsers που δεν υποστηρίζουν εγγενώς το @scope, μπορείτε να εξετάσετε τη χρήση ενός polyfill. Ένα polyfill είναι ένα κομμάτι κώδικα JavaScript που παρέχει τη λειτουργικότητα μιας νέας δυνατότητας σε παλαιότερους browsers. Ωστόσο, να γνωρίζετε ότι τα polyfills μπορούν να προσθέσουν επιβάρυνση στην ιστοσελίδα σας και ενδέχεται να μην αναπαράγουν τέλεια τη συμπεριφορά της εγγενούς δυνατότητας.

Βέλτιστες Πρακτικές για τη Χρήση του @scope

Για να αξιοποιήσετε στο έπακρο το @scope και να διασφαλίσετε ότι ο κώδικας CSS σας παραμένει συντηρήσιμος και επεκτάσιμος, λάβετε υπόψη αυτές τις βέλτιστες πρακτικές:

• Χρησιμοποιήστε Σαφείς και Περιγραφικές Ρίζες Εμβέλειας: Επιλέξτε ρίζες εμβέλειας που προσδιορίζουν σαφώς το τμήμα της εφαρμογής σας που θέλετε να διαμορφώσετε. Χρησιμοποιήστε ουσιαστικά ονόματα κλάσεων ή IDs για να κάνετε τις ρίζες εμβέλειας εύκολα κατανοητές.
• Αποφύγετε τις Υπερβολικά Ευρείες Εμβέλειες: Ενώ μπορεί να είναι δελεαστικό να εφαρμόσετε το @scope σε ένα στοιχείο πολύ υψηλού επιπέδου, προσπαθήστε να διατηρήσετε την εμβέλεια όσο το δυνατόν πιο στενή. Αυτό θα βοηθήσει στη μείωση του κινδύνου ακούσιων παρενεργειών και θα κάνει τον κώδικα CSS σας πιο αρθρωτό.
• Διατηρήστε μια Συνεπή Σύμβαση Ονοματοδοσίας: Καθιερώστε μια συνεπή σύμβαση ονοματοδοσίας για τις κλάσεις και τα IDs της CSS σας. Αυτό θα διευκολύνει την αναγνώριση των ριζών εμβέλειας και την κατανόηση της δομής του κώδικα CSS σας.
• Τεκμηριώστε τις Εμβέλειές σας: Προσθέστε σχόλια στον κώδικα CSS σας για να εξηγήσετε τον σκοπό και την εμβέλεια κάθε μπλοκ @scope. Αυτό θα βοηθήσει άλλους προγραμματιστές (και τον μελλοντικό εαυτό σας) να κατανοήσουν την πρόθεση του στυλ σας.
• Δοκιμάστε Εξονυχιστικά: Όπως με κάθε νέα δυνατότητα CSS, είναι σημαντικό να δοκιμάσετε τον κώδικά σας εξονυχιστικά για να διασφαλίσετε ότι συμπεριφέρεται όπως αναμένεται σε διαφορετικά προγράμματα περιήγησης και συσκευές.
• Λάβετε υπόψη τις επιπτώσεις στην απόδοση: Ενώ το @scope συχνά βελτιώνει τη συντηρησιμότητα, η εξαιρετικά βαριά χρήση (ειδικά με πολύπλοκους επιλογείς) μπορεί να έχει κάποια επίδραση στην απόδοση. Να είστε προσεκτικοί με την πολυπλοκότητα των επιλογέων και να δοκιμάζετε την απόδοση.

Εναλλακτικές του @scope

Πριν από το @scope, οι προγραμματιστές χρησιμοποιούσαν άλλες μεθόδους για να επιτύχουν παρόμοιους στόχους, όπως:

• CSS Modules: Τα CSS Modules μετασχηματίζουν τα ονόματα των κλάσεων CSS ώστε να έχουν τοπική εμβέλεια από προεπιλογή, αποτρέποντας αποτελεσματικά τις συγκρούσεις ονομάτων. Απαιτούν διαδικασία build.
• BEM (Block, Element, Modifier): Το BEM είναι μια σύμβαση ονοματοδοσίας που βοηθά στη δημιουργία αρθρωτών και επαναχρησιμοποιήσιμων components CSS. Αν και δεν περιορίζει εγγενώς τα στυλ, ενθαρρύνει μια δομημένη προσέγγιση που μπορεί να μειώσει τον κίνδυνο συγκρούσεων στυλ.
• Shadow DOM (Web Components): Το Shadow DOM παρέχει πραγματική ενθυλάκωση στυλ για τα web components. Τα στυλ που ορίζονται στο shadow DOM ενός web component δεν επηρεάζουν το υπόλοιπο έγγραφο, και το αντίστροφο.
• iFrames: Τα iFrames παρέχουν πλήρη απομόνωση, αλλά δημιουργούν επίσης ξεχωριστά πλαίσια περιήγησης και μπορεί να είναι πιο πολύπλοκα στη διαχείρισή τους.

Κάθε μία από αυτές τις προσεγγίσεις έχει τα δικά της πλεονεκτήματα και μειονεκτήματα. Το @scope προσφέρει μια ελκυστική εναλλακτική λύση που είναι εγγενής στη CSS και δεν απαιτεί διαδικασία build ή συγκεκριμένη σύμβαση ονοματοδοσίας, καθιστώντας το ένα πολύτιμο εργαλείο στην εργαλειοθήκη του σύγχρονου web developer.

Συμπέρασμα

Το CSS @scope είναι μια ισχυρή νέα δυνατότητα που προσφέρει σημαντική βελτίωση στον τρόπο διαχείρισης και οργάνωσης των στυλ CSS. Παρέχοντας έναν μηχανισμό για τον ορισμό κανόνων στυλ περιορισμένης εμβέλειας, το @scope βοηθά στη μείωση των συγκρούσεων εξειδίκευσης, στη βελτίωση της συντηρησιμότητας, στην ενίσχυση της επαναχρησιμοποίησης και στην απλοποίηση της αρχιτεκτονικής CSS. Είτε εργάζεστε σε μια μικρή ιστοσελίδα είτε σε μια μεγάλη, σύνθετη web εφαρμογή, το @scope μπορεί να σας βοηθήσει να γράψετε καθαρότερο, πιο διαχειρίσιμο και πιο επεκτάσιμο κώδικα CSS.

Καθώς η υποστήριξη του @scope από τα προγράμματα περιήγησης συνεχίζει να αυξάνεται, είναι πιθανό να γίνει ένα ολοένα και πιο σημαντικό εργαλείο για τους web developers παγκοσμίως. Κατανοώντας τη σύνταξη, τα οφέλη και τις περιπτώσεις χρήσης του @scope, μπορείτε να παραμείνετε μπροστά από τις εξελίξεις και να αξιοποιήσετε αυτήν την ισχυρή δυνατότητα για να δημιουργήσετε καλύτερες εμπειρίες ιστού για τους χρήστες σας.

Αγκαλιάστε τη δύναμη του @scope και φέρτε επανάσταση στην προσέγγισή σας στο στυλ CSS!